<script setup lang="ts">
import { http } from '../../apis/user'
import tarBarVue from '@/components/tarBar.vue';
import { Swipe, SwipeItem, Icon, Grid, GridItem } from 'vant';
interface goods {
  goodsCoverImg: string
  goodsId: number
  goodsIntro: string
  goodsName: string
  sellingPrice: number
  tag: string
}
let isTop = true
let topColor = '#1BAEAE'
let carousels: {
  carouselUrl: string,
  redirectUrl: string
}[] = reactive([])
let hotGoodses: goods[] = reactive([])
let newGoodses: goods[] = reactive([])
let recommendGoodses: goods[] = reactive([])
let vanGridData = reactive([
  {
    url: 'http://s.weituibao.com/1583585285461/cs.png',
    desc: '新峰超市',
  },
  {
    url: 'http://s.weituibao.com/1583585285468/fs.png',
    desc: '新峰服饰',
  },
  {
    url: 'http://s.weituibao.com/1583585285470/qq.png',
    desc: '全球购',
  },
  {
    url: 'http://s.weituibao.com/1583585285472/sx.png',
    desc: '新峰生鲜',
  },
  {
    url: 'http://s.weituibao.com/1583585285467/dj.png',
    desc: '新峰到家',
  },
  {
    url: 'http://s.weituibao.com/1583585285465/cz.png',
    desc: '充值',
  },
  {
    url: 'http://s.weituibao.com/1583585285469/pt.png',
    desc: '9.9元拼',
  },
  {
    url: 'http://s.weituibao.com/1583585285468/juan.png',
    desc: '领券 ',
  },
  {
    url: 'http://s.weituibao.com/1583585285471/sq.png',
    desc: '省钱 ',
  },
  {
    url: 'http://s.weituibao.com/1583585285470/qb.png',
    desc: '全部',
  },])
function toUser() {
}
function toCaregary() {
}
function changeTop(): void {
  let t = document.documentElement.scrollTop || document.body.scrollTop;
  if (t > 50) {
    isTop = false;
    topColor = 'white';
  } else {
    isTop = true;
    topColor = '#1BAEAE';
  }
}
function getData() {
  http.getIndexInfo().then((data) => {
    let goodsDatas = data.data
    carousels.push(...goodsDatas.carousels)
    newGoodses.push(...goodsDatas.newGoodses)
    recommendGoodses.push(...goodsDatas.recommendGoodses)
    hotGoodses.push(...goodsDatas.hotGoodses)
  })
}
getData()
onMounted(() => {
  window.addEventListener("scroll", changeTop);
})
onBeforeUnmount(() => {
  window.addEventListener("scroll", changeTop);
})
</script>
<template>
  <div class="home_box">
    <!-- 顶 -->
    <header class="header_box" :class="{ active: !isTop }">
      <div class="left_box">
        <Icon name="wap-nav" style="display: inline-block; margin: 0.3rem 0 0 0.3rem" @click="toCaregary"
          :color="topColor" size=".6rem" />
      </div>

      <div class="middle_box">
        <span class="app_name"> 青青草原</span>
        <span class="AD">山河无恙，人间皆</span>
      </div>
      <div class="right_box">
        <Icon name="contact" style="display: inline-block; margin: 0.3rem 0 0 0.3rem" @click="toUser" :color="topColor"
          size=".6rem" />
      </div>
    </header>
    <!-- 顶部导航 结束-->

    <!-- 轮播图 -->
    <Swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <SwipeItem v-for="item in carousels" :key="item.carouselUrl">
        <img :src="item.carouselUrl" alt="" />
      </SwipeItem>
    </Swipe>
    <!-- 轮播图
     -->

    <!-- 十个小 -->
    <Grid :column-num="5" icon-size="1rem" :border="false">
      <GridItem v-for="(item, index) in vanGridData" :key="index" :icon="item.url" :text="item.desc" />
    </Grid>
    <!-- 十个小图标 -->
    <main>
      <!-- 新品上线 -->
      <section class="new_goods">
        <p class="new_goods_title">新品上线</p>
        <Grid :column-num="2">
          <GridItem v-for="item in newGoodses" :key="item.goodsId">
            <router-link :to="'/Info/' + item.goodsId">
              <img :src="item.goodsCoverImg" alt="" class="goods_img" />
              <div class="goods_desc">
                <p class="desc">{{ item.goodsName }}</p>
                <span class="price">￥{{ item.sellingPrice }}</span>
              </div>
            </router-link>
          </GridItem>
        </Grid>
      </section>
      <!-- 新品上线 -->
      <!-- 热门商品 -->
      <section class="new_goods">
        <p class="new_goods_title">热门商品</p>
        <Grid :column-num="2">
          <GridItem v-for="item in hotGoodses" :key="item.goodsId">
            <router-link :to="'/Info/' + item.goodsId">
              <img :src="item.goodsCoverImg" alt="" class="goods_img" />
              <div class="goods_desc">
                <p class="desc">{{ item.goodsName }}</p>
                <span class="price">￥{{ item.sellingPrice }}</span>
              </div>
            </router-link>
          </GridItem>
        </Grid>
      </section>
      <!-- 热门商品 -->
      <!-- 最新推荐 -->
      <section class="new_goods">
        <p class="new_goods_title">最新推荐</p>
        <Grid :column-num="2">
          <GridItem v-for="item in recommendGoodses" :key="item.goodsId">
            <router-link :to="'/Info/' + item.goodsId">
            <img :src="item.goodsCoverImg" alt="" class="goods_img" />
            <div class="goods_desc">
              <p class="desc">{{ item.goodsName }}</p>
              <span class="price">￥{{ item.sellingPrice }}</span>
            </div>
          </router-link>
          </GridItem>
        </Grid>
      </section>
      <!-- 最新推荐 -->
    </main>
  </div>
  <tarBarVue></tarBarVue>
</template>
<style lang="less" scoped>
.home_box {
  .header_box {
    position: fixed;
    width: 100%;
    height: 50px;
    display: flex;
    z-index: 200;
    top: 0;
    left: 0;

    .left_box {
      width: 50px;
      flex: none;
      align-items: center;
    }

    .right_box {
      width: 50px;
      flex: none;
    }

    .middle_box {
      display: flex;
      flex: 1;
      height: 0.53333rem;
      margin: 0.26667rem 0.3rem;
      padding: 0.13333rem;
      color: #232326;
      background: hsla(0, 0%, 100%, 0.7);
      border-radius: 0.53333rem;

      .app_name {
        flex: 1;
        display: inline-block;
        padding: 0 0.4rem 0 0.04rem;
        font-size: 0.5rem;
        color: #1baeae;
        text-align: center;
        border-right: 0.01rem solid black;
        line-height: 0.6rem;
        font-weight: 700;
      }

      .AD {
        flex: 2;
        text-align: center;
        display: inline-block;
        font-size: 0.3rem;
        color: #666;
        line-height: 0.6rem;
      }
    }

    &.active {
      background: #1baeae;

      .left_box,
      .right_box {
        color: white;
      }
    }
  }

  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;

    img {
      width: 100%;
      height: auto;
    }
  }

  .new_goods_title {
    background: #f9f9f9;
    height: 1.33333rem;
    line-height: 1.33333rem;
    text-align: center;
    color: #1baeae;
    font-size: 0.42667rem;
    font-weight: 500;
  }

  .goods_img {
    display: block;
    width: 3.2rem;
    margin: 0 auto;
  }

  .goods_desc {
    text-align: center;
    font-size: 0.37333rem;
    padding: 0.26667rem 0;

    .desc {
      color: #000;
    }
  }

  .price {
    color: #1baeae;
  }
}
</style>
